<script setup>
import { ref } from 'vue'; // 引入 Vue 3 相关的模块
import axios from 'axios';
import * as echarts from "echarts";
import {onMounted, onUnmounted} from "vue";

let pressValues = [0.10000E-01, 0.20000E-01]; // 初始两个 press 值
let chartData = []; // 存储图表数据
const yAxisData = [
  0.10000E-01, 0.20000E-01, 0.34385E-01, 0.54776E-01, 0.80976E-01, 0.10891, 0.12674,
  0.13829, 0.14622, 0.15209, 0.15659, 0.16015, 0.16303, 0.16541, 0.16741, 0.16910,
  0.17056, 0.17182, 0.17293, 0.17391, 0.17477, 0.17554, 0.17623, 0.17685, 0.17741,
  0.17792, 0.17838, 0.17879, 0.17918, 0.17952, 0.17984, 0.18013, 0.18040, 0.18064,
  0.18086, 0.18107, 0.18125, 0.18142, 0.18158, 0.18172, 0.18185, 0.18196, 0.18207,
  0.18216, 0.18225, 0.18232, 0.18238, 0.18244, 0.18249, 0.18253, 0.18256, 0.18259,
  0.18261, 0.18262, 0.18263, 0.18263
];

const xAxisData = [
  0.237272E-003, 0.560075E-003, 0.120519E-002, 0.244178E-002, 0.503056E-002, 0.101069E-001,
  0.160239E-001, 0.221757E-001, 0.283350E-001, 0.345631E-001, 0.408297E-001, 0.471164E-001,
  0.534125E-001, 0.597112E-001, 0.660082E-001, 0.723005E-001, 0.785860E-001, 0.848631E-001,
  0.911307E-001, 0.973879E-001, 0.103634, 0.109869, 0.116091, 0.122301, 0.128498, 0.134683,
  0.140854, 0.147012, 0.153157, 0.159288, 0.165406, 0.171509, 0.177599, 0.183676, 0.189738,
  0.195786, 0.201820, 0.207841, 0.213847, 0.219839, 0.225816, 0.231780, 0.237730, 0.243665,
  0.249586, 0.255493, 0.261385, 0.267264, 0.273128, 0.278977, 0.284813, 0.290634, 0.296441,
  0.302233, 0.308011, 0.313775
];

let lineChart = null;
    let motaiImageUrl = ref(null); // 使用 ref 来创建响应式数据
    let zaiheImageUrl = ref(null); // 使用 ref 来创建响应式数据
    // const baseUrl = 'E:/Project/DigitalTwinPic/waiya/';
    // const baseUrl = 'pic/src/assets/DigitalTwinPic/waiya/';
    const baseUrl = 'http://115.24.173.26:8002/DigitalTwinPic/waiya/';


      // 发起 GET 请求获取图像
      axios.get('/api/waiya/motai')
        .then((response) => {
          // 处理响应数据
          console("motai 动态",response.data.data)
          if (response.data.code === 1) {
            motaiImageUrl.value= baseUrl + response.data.data;
            console.log(motaiImageUrl.value);
        } else {
          alert(response.data.msg);
        }

        })
        .catch((error) => {
          console.error('获取图像失败', error);
        });

        axios.get('/api/waiya/zaihe')
        .then((response) => {
          // 处理响应数据
          if (response.data.code === 1) {
            zaiheImageUrl.value= baseUrl + response.data.data;
            console.log(zaiheImageUrl.value);
        } else {
          alert(response.data.msg);
        }

        })
        .catch((error) => {
          console.error('获取图像失败', error);
        });

function updateChartData(pressValue) {
  let updated = false;
  for (let i = 0; i < yAxisData.length; i++) {
    if (yAxisData[i] <= pressValue) {
      const newData = { x: xAxisData[i], y: yAxisData[i], symbol: 'pin' };
      if (!chartData.some(data => data.y === newData.y)) {
        chartData.push(newData);
        updated = true;
      }
    } else {
      break; // 结束更新
    }
  }

  return updated;
}



// 更新 press 值并重新渲染图表
function updateChart() {
  const lastPressValue = pressValues[pressValues.length - 1];
  const updated = updateChartData(lastPressValue);

  if (updated) {
    const options = {
      grid: {
        left: '15%',
      },
      // title: {
      //   text: "载荷---位移曲线",
      //   left: "center",
      // },
      xAxis: {
        type: 'value',
        name: '位移（mm）',
        nameGap: 50,
        nameLocation:'center',
        axisLabel: {
            rotate:45
        }
      },
      yAxis: {
        type: 'value',
        name: '载荷（MPa）',
        nameGap: 20,
        // nameLocation:'center'
      },
      tooltip: {
        trigger: "axis"
      },
      series: [
        {
          type: 'line',
          smooth: true,
          data: chartData.map(data => [data.x.toFixed(6), data.y.toFixed(6)]),
        }
      ]
    };

    lineChart.setOption(options);
  }
}



// 模拟 press 值更新，并重新渲染图表
function simulatePressUpdate() {
  const newPressValue = pressValues[pressValues.length - 1]+0.011; // 获取到的新的 press 值
  console.log(newPressValue)
  pressValues.push(newPressValue); // 添加新的 press 值
  updateChart();
}

setInterval(simulatePressUpdate, 2000);


onMounted(() => {
  lineChart = echarts.init(document.getElementById("avi"), "purple-passion");
  updateChart();
});

onUnmounted(() => {
  lineChart.dispose;
});




</script>


<template >
<div class="page-vedio flex-base-page">
    <div class="first-vedio flex-base-vedio">
        <div class="first-vedio-left">
          <div id="divPlugin" class="plugin"></div>
        </div>
        <div class="first-vedio-right flex-title-first">
          现场实时监控视频
        </div>
    </div>
    <div class="pic1 flex-base">
        <div class="pic1-left">
          <img :src="motaiImageUrl" class="image">
        </div>
        <div class="pic1-right flex-title">
          试件模态变化图
        </div>
    </div>
    <div class="pic2 flex-base">
        <div class="pic2-left" id="avi">
          <!-- <video controls :src="zaiheImageUrl" width="100%" height="100%" id="playvedio">
               <source />
          </video>     -->
        </div>
        <div class="pic2-right flex-title">
          载荷一位移曲线
        </div>
    </div>
</div>
</template>

<style scoped>
.plugin{
  width: 100%;
  height: 100%;
}
.page-vedio {
    height: 100%;
    width: 526px;
}
.flex-base-page {
    display: flex;
    flex-direction: column;
}
.flex-base {
    display: flex;
    /* justify-content: center;
    align-items: center; */
    flex-direction: row;
}
.flex-title-first{
  display: flex;
  align-content: center;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  writing-mode: vertical-rl;
  font-size: 18px;
  letter-spacing: 10px;
}
.flex-title{
  display: flex;
  align-content: center;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  writing-mode: vertical-rl;
  font-size: 20px;
  letter-spacing: 5px;
}
.flex-base-vedio {
    display: flex;
    /* justify-content: center;
    align-items: center; */
}
.first-vedio {
    width: 100%;
    height: 276px;
    margin-left:25px;
    margin-top:25px;
}
.first-vedio-left {
    width: 330px;
    height: 276px;
}
.first-vedio-right{
  width: 66px;
  height: 235px;
  border: 1px solid #808080;
  margin-left:7px;
  margin-top:40px;
}
.pic1 {
    width: 100%;
    height: 310px;
    margin-left: 25px;
    margin-top: 30px;
}
.pic1-left {
  width: 315px;
  height: 220px;
  border: 1px solid #808080;
  /* background-image: url('/src/'); */
  background-size: cover; /* 保持图片比例并覆盖整个 div */
  background-repeat: no-repeat; /* 不重复背景图片 */
}
.pic1-right {
  width: 72px;
  height: 220px;
}
.pic2 {
    width: 100%;
    height: 310px;
    margin-top:-30px;
    margin-left: 25px;
}
.pic2-left {
  width: 315px;
  height: 220px;
  border: 1px solid #808080;
  background-size: cover; /* 保持图片比例并覆盖整个 div */
  background-repeat: no-repeat; /* 不重复背景图片 */
}
.pic2-right {
  width: 72px;
  height: 220px;
}
.image {
  width: 100%; /* 图像宽度与外层盒子宽度一致 */
  height: 100%; /* 图像高度与外层盒子高度一致 */
  object-fit: cover; /* 调整图像以填充整个图像框 */
}
</style>
